
<template>
    <el-dialog v-model="visible" title="Shipping address" :before-close="cancel">
        <el-form :model="form" ref="formRef">
            <el-form-item label="账号：" :label-width="formLabelWidth">
                <el-input v-model="form.username" autocomplete="off" />
            </el-form-item>
            <el-form-item label="姓名：" :label-width="formLabelWidth">
                <el-input v-model="form.nickName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱：" :label-width="formLabelWidth">
                <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="密码：" :label-width="formLabelWidth">
                <el-input v-model="form.password" autocomplete="off" type="password" />
            </el-form-item>
            <el-form-item label="备注：" :label-width="formLabelWidth">
                <el-input v-model="form.note" autocomplete="off" type="textarea" />
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel()">取消</el-button>
                <el-button type="primary" @click="sure()">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import type { Ref } from "vue";
import { ref, withDefaults, watch } from "vue";
import * as http from '@/request/api'
const formLabelWidth = '140px'
// withDefaults设置组件属性默认值
const props = withDefaults(
    defineProps<{ visible: boolean; data: IAdminListResArr }>(),
    {
        visible: false,
    }
);
const form = ref({}) as Ref<IAdminListResArr>;
watch(
    () => props.data,
    (val) => {
        console.log(val);
        form.value = { ...val };
    },
    { deep: true }
);

// 声明emit
const emit = defineEmits<{
    (event: "close"): void;
}>();
// 关闭方法
function cancel() {
    emit("close");
}
const sure = () => {

    ElMessageBox.confirm(
        '此操作将修改当前用户信息, 是否继续?',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let res = await http.admin.adminUpdate({
                ...form.value
            })

            if (res.code == 200) {
                ElMessage.success(res.message)
            } else {
                ElMessage.error(res.message)
            }
            emit("close");
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '用户取消',
            })
            emit("close");
        })
}
</script>
